<template>

  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="待审核" name="first">
      <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
        <div class="grid-container">
          <el-form-item label="账号">
            <el-input v-model="state.dataForm.phone" type="text" clearable placeholder="请输入账号"
              @change="queryData"></el-input>
          </el-form-item>
        </div>
        <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
          v-loading="state.dataListLoading" :data="state.dataList" border
          @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
          <el-table-column align="center" prop="certifiedId" label="认证编号" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="phone" label="账号" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="name" label="姓名" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="reviewDate" label="评审日期" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="applyTime" label="认证申请时间" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="auditor" label="审核人" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="auditTime" label="审核时间" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="auditStatus" label="审核状态" width="100">
            <template v-slot="scope">
              <span v-if="scope.row.auditStatus === '0'" style="color: #F56C6C">待审核</span>
              <span v-else-if="scope.row.auditStatus === '1'" style="color: #67C23A">已通过</span>
              <span v-else-if="scope.row.auditStatus === '2'" style="color: #F56C6C">已驳回</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="驳回原因" show-overflow-tooltip>
            <template v-slot="scope">
              <span v-if="scope.row.auditStatus === '2'">{{ scope.row.auditReason || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" prop="readOnly" label="操作">
            <template v-slot="scope">
              <!-- 列表按钮 -->
              <el-button link @click="handleView(scope.row)" style="color: rgba(22, 119, 255, 1)">查看</el-button>
              <el-button v-if="scope.row.auditStatus === '0'" link @click="handleAudit(scope.row)"
                style="color: rgba(22, 119, 255, 1)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
        :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
        @current-change="state.pageCurrentChangeHandle"> </el-pagination>
      <!-- 审核弹窗 -->
      <!-- <EngineerDialog ref="engineerDialogRef" @success="state.getDataList()" /> -->
    </el-tab-pane>
    <el-tab-pane label="全部" name="second">
      <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
        <div class="grid-container">
          <el-form-item label="账号">
            <el-input v-model="state.dataForm.phone" type="text" clearable placeholder="请输入账号"
              @change="queryData"></el-input>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="state.dataForm.auditStatus" placeholder="请选择审核状态" clearable @change="queryData">
              <el-option label="待审核" value="0"></el-option>
              <el-option label="审核通过" value="1"></el-option>
              <el-option label="审核驳回" value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
          v-loading="state.dataListLoading" :data="state.dataList" border
          @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
          <el-table-column align="center" prop="certifiedId" label="认证编号" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="phone" label="账号" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="name" label="姓名" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="reviewDate" label="评审日期" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="applyTime" label="认证申请时间" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="auditor" label="审核人" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="auditTime" label="审核时间" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="auditStatus" label="审核状态">
            <template v-slot="scope">
              <span v-if="scope.row.auditStatus === '0'" style="color: #F56C6C">待审核</span>
              <span v-else-if="scope.row.auditStatus === '1'" style="color: #67C23A">已通过</span>
              <span v-else-if="scope.row.auditStatus === '2'" style="color: #F56C6C">已驳回</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="驳回原因" show-overflow-tooltip>
            <template v-slot="scope">
              <span v-if="scope.row.auditStatus === '2'">{{ scope.row.auditReason || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" prop="readOnly" label="操作">
            <template v-slot="scope">
              <!-- 列表按钮 -->
              <el-button link @click="handleView(scope.row)" style="color: rgba(22, 119, 255, 1)">查看</el-button>
              <el-button v-if="scope.row.auditStatus === '0'" link @click="handleAudit(scope.row)"
                style="color: rgba(22, 119, 255, 1)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
        :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
        @current-change="state.pageCurrentChangeHandle"> </el-pagination>
      <!-- 审核弹窗 -->
      <!-- <EngineerDialog ref="engineerDialogRef" @success="state.getDataList()" /> -->
    </el-tab-pane>
    <EngineerDialog ref="engineerDialogRef" @success="state.getDataList()" />
  </el-tabs>



</template>
<script lang="ts" setup>
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, onMounted, onActivated } from "vue";
import router from "@/router";
import EngineerDialog from "@/components/EngineerDialog.vue";

import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
  // 切换到待审核标签页时，固定设置审核状态为待审核
  if (tab.props.name === 'first') {
    state.dataForm.auditStatus = '0'
  } else if (tab.props.name === 'second') {
    // 切换到全部标签页时，清除审核状态筛选
    state.dataForm.auditStatus = ''
  }
  // 重新获取数据
  state.page = 1
  state.getDataList()
}

const view = reactive({
  getDataListURL: "/noc/authengineeraudit/list",
  getDataListIsPage: true,
  dataForm: {
    phone: "",
    auditStatus: "0" // 默认设置为待审核状态
  }
});

const engineerDialogRef = ref();

// 修改查询按钮的点击处理
const queryData = () => {
  state.page = 1;
  // 如果是待审核标签页，确保auditStatus为'0'
  if (activeName.value === 'first') {
    state.dataForm.auditStatus = '0'
  }
  saveCurrentQuery();
  state.getDataList();
};

// 修改重置方法以清除保存的查询条件
const resetForm = () => {
  view.dataForm.phone = '';
  // 根据当前标签页设置auditStatus
  if (activeName.value === 'first') {
    view.dataForm.auditStatus = '0'
  } else {
    view.dataForm.auditStatus = ''
  }
  state.page = 1;
  saveCurrentQuery();
  state.getDataList();
};

const saveCurrentQuery = () => {
  try {
    const query = {
      dataForm: { ...state.dataForm },
      page: state.page,
      limit: state.limit,
      activeTab: activeName.value // 保存当前标签页状态
    };
    sessionStorage.setItem("authengineerauditQuery", JSON.stringify(query));
  } catch (error) {
    console.error("保存查询条件失败:", error);
  }
};

const restoreQuery = () => {
  try {
    const savedQuery = sessionStorage.getItem("authengineerauditQuery");
    if (savedQuery) {
      const query = JSON.parse(savedQuery);
      state.dataForm = { ...state.dataForm, ...query.dataForm };
      state.page = query.page || 1;
      state.limit = query.limit || 20;
      // 恢复标签页状态
      if (query.activeTab) {
        activeName.value = query.activeTab;
        // 根据标签页设置auditStatus
        if (activeName.value === 'first') {
          state.dataForm.auditStatus = '0'
        }
      }
    }
  } catch (error) {
    console.error("恢复查询条件失败:", error);
  }
};

const getDataList = () => {
  // 如果是待审核标签页，强制设置auditStatus为'0'
  const params: any = {
    phone: state.dataForm.phone,
    page: state.page,
    limit: state.limit
  };

  if (activeName.value === 'first') {
    params.auditStatus = '0'
  } else {
    params.auditStatus = state.dataForm.auditStatus
  }

  baseService.get('/noc/authengineeraudit/list', {
    params: params
  }).then(res => {
    state.dataList = res.data.list;
    state.total = res.data.total;
  });
};

//跳转弹窗
const handleView = (row: any) => {
  saveCurrentQuery();
  engineerDialogRef.value?.open(row);
};

const handleAudit = (row: any) => {
  saveCurrentQuery();
  engineerDialogRef.value?.open(row, 'audit');
};

// 查看工程师认证详情
const check = (id: string) => {
  baseService.get(`/noc/authengineeraudit/info/${id}`).then(res => {
    engineerDialogRef.value?.open(res.data, 'view');
  });
};

const state = reactive({ ...useView(view), ...toRefs(view) });
state.limit = 20;

onMounted(() => {
  // 初始化时设置待审核状态，因为默认显示第一个标签页
  state.dataForm.auditStatus = '0'
  restoreQuery();
  state.getDataList();
});

onActivated(() => {
  restoreQuery();
  state.getDataList();
});
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
  white-space: nowrap;
}

.el-input {
  width: 218px;
  height: 32px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
}

.form {
  display: flex;
  justify-content: space-between;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  // grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* 自动适应列宽，每列至少200px */
  gap: 16px;
  /* 元素间距 */
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
